<template>
  <!--布局中心-->
  <div class="layout-container flex flex-v">
    <!--头部信息-->
    <div class="header-box">
      <form action="/">
        <van-search
          placeholder="请输入搜索关键词"
          show-action
        />
      </form>
    </div>

    <!--内容区域-->
    <div class="main-box flex-1">
      <router-view></router-view>
    </div>
    <!--底部tab页面-->
    <van-tabbar v-model="active" @change="changeEv">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">详情</van-tabbar-item>
      <van-tabbar-item icon="friends-o">发布须知</van-tabbar-item>
      <van-tabbar-item icon="setting-o">发布信息</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {Tabbar, TabbarItem, Search} from 'vant'

export default {
  name: 'layout',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Search.name]: Search
  },
  data () {
    return {
      active: 0,
      pathArr: ['test1', 'test2', 'infoDetail', 'issueNotice']
    }
  },
  mounted () {
    let self = this
    self.active = self.pathArr.indexOf(self.$route.name) // 获取当前的路由信息,并进行高亮
  },
  methods: {
    changeEv (item) {
      let self = this
      self.$router.push({path: `/${self.pathArr[item]}`})
    }
  }
}
</script>

<style scoped lang="less">
  // 最外层
  .layout-container {
    width:100%;
    height:100%;
    .link-item {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
    }

    // 中心区域
    .main-box{
      z-index: 0;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      margin-bottom: 35px;
      margin-top: 0px;
    }
  }
</style>
